<template>
  <!-- <div>
  用户页面




    </div> -->

  <el-card class="box-card">
    <!-- 头部 面包屑 -->

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 内容主题部分  -->

    <el-row :gutter="10">
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-input
            placeholder="请输入内容"
            v-model="searchVal"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-button type="primary">添加用户</el-button>
        </div>
      </el-col>
    </el-row>

    <!--  列表展示 -->

    <el-table :data="tableData" border stripe style="width: 100%">
      <!--  需要注意一下 type =index -->
      <el-table-column label="#" width="50" type="index"> </el-table-column>

      <el-table-column prop="username" label="姓名" width="180" height="50">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>

      <el-table-column prop="mobile" label="电话"> </el-table-column>
      <el-table-column prop="role_name" label="角色"> </el-table-column>
      <el-table-column prop="mg_state" label="状态"> </el-table-column>

      <el-table-column prop="address" label="操作" class="ctrolBox">
        <el-button type="primary" icon="el-icon-share">修改</el-button>
        <el-button type="danger" icon="el-icon-delete">删除</el-button>
        <el-button type="warning" icon="el-icon-setting">操作</el-button>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
// 面包屑导航 el-breadcrumb
// Element-UI 栅格系统基本使用 el-row
// 表格布局 el-table、el-pagination

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      searchVal: "",
      tableData: [
        {
          username: "tige117",
          mobile: "18616358651",
          type: 1,
          email: "tige112@163.com",
          create_time: "2017-11-09T20:36:26.000Z",
          mg_state: true, // 当前用户的状态
          role_name: "炒鸡管理员",
        },
        {
          username: "tige117",
          mobile: "18616358651",
          type: 1,
          email: "tige112@163.com",
          create_time: "2017-11-09T20:36:26.000Z",
          mg_state: true, // 当前用户的状态
          role_name: "炒鸡管理员",
        },
        {
          username: "tige117",
          mobile: "18616358651",
          type: 1,
          email: "tige112@163.com",
          create_time: "2017-11-09T20:36:26.000Z",
          mg_state: true, // 当前用户的状态
          role_name: "炒鸡管理员",
        },
        {
          username: "tige117",
          mobile: "18616358651",
          type: 1,
          email: "tige112@163.com",
          create_time: "2017-11-09T20:36:26.000Z",
          mg_state: true, // 当前用户的状态
          role_name: "炒鸡管理员",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped  lang="less">
.ctrolBox {
  .el-button {
    font-size: 14px !important;
  }
}
</style>
